<template>
  <div class="box">
    <TableSearch :search="state.search" @search="onSearch" @listenClick="listenClick" />
    <div class="table-container">

      <el-table class="mytable" :data="state.tableData" v-bind="$attrs" row-key="id" stripe style="width: 100%"
        v-loading="false" :header-cell-style="{ background: '#E0E0E0', color: '#2B2B2B', fontWeight: 500 }">
        <!-- <el-table-column type="index" label="序号" width="66" /> -->
        <!-- <el-table-column width="60" type="expand" ></el-table-column> -->

        <el-table-column prop="configValue" label="设备类型" />

        <!-- <el-table-column show-overflow-tooltip label="字典类型">
          <template #default="scope">
            <div>
              {{ scope.row.customizeFlag == 0 ? '系统默认' : '企业自定义' }}
            </div>
          </template>
        </el-table-column> -->

        <el-table-column label="操作">
          <template #default="scope">
            <el-button class="my-table__btn" size="default" plain @click="addChild(scope.row)" type="success">
              新增子项
            </el-button>
            <el-button class="my-table__btn" size="default" plain @click="editDictionary(scope.row)" type="primary">
              编辑
            </el-button>
            <el-button class="my-table__btn" size="default" plain @click="deleteItem(scope.row)" type="danger">
              删除
            </el-button>
          </template>
        </el-table-column>

        <template #empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
    </div>

    <DictionariesDialog :dialogVisible="dialogVisible" :dialogForm="dialogForm" :dialogDetail="dialogDetail"
      @cancel="cancel" @submit="submit">
    </DictionariesDialog>
  </div>
</template>

<script setup lang='ts'>

import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, defineAsyncComponent, watch } from 'vue'
import { dictionaryList, deleteDictionary } from '/@/api/setting/index'

const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const DictionariesDialog = defineAsyncComponent(() => import('./DictionariesDialog.vue'));

// 定义父组件传过来的值
const props = defineProps({
  configType: {
    type: String,
    default: '',
  },
})

const dialogVisible = ref<boolean>(false)//弹窗是否出现
const dialogForm = {
  width: '25%',
  title: ''
}

//定义变量内容
const state = reactive({
  tableData: [{
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  }],
  param: {
    configType: '',
    keyword: ''
    // type: 1 // 必传参数，分页的不要传
  },
  // 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
  search: {
    param: [
      { label: '', prop: 'keyword', placeholder: '可输入名称搜索', type: 'input', },
    ],
    btn: [
      { text: '新增', fun: 'addDictionary', disable: false, loading: false, type: 'primary', hide(): boolean { return false } }
    ],
    //重置表格
    resets: false
  },
});

// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
  state.param = Object.assign({}, state.param, { ...data });
  getTableData();
}

const dialogDetail = ref<any>({})

//新增字典弹框
const addDictionary = () => {
  dialogForm.title = '新增'
  dialogDetail.value = { configType: props.configType, parentId: 0 }
  dialogVisible.value = !dialogVisible.value
}

//新增子项
const addChild = (row: any) => {
  dialogForm.title = '新增子项'
  dialogDetail.value = { configType: props.configType, parentId: row.id }
  dialogVisible.value = !dialogVisible.value
}

//编辑字典弹框
const editDictionary = (row: any) => {
  dialogForm.title = '编辑'
  dialogDetail.value = row
  dialogVisible.value = !dialogVisible.value
}
//删除字典弹框
const deleteItem = (row: any) => {
  ElMessageBox.confirm(
    '是否删除此字典?',
    '删除字典',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteDictionary(row.id).then(res => {
        if (res.code == 0) {
          ElMessage({ type: 'success', message: '删除成功', })
          getTableData();
        }
      })
    })
    .catch(() => {
      ElMessage({ type: 'info', message: '已取消', })
    })
}


//弹框取消点击
const cancel = () => {
  dialogVisible.value = !dialogVisible.value
}
//弹框确定点击
const submit = () => {
  dialogVisible.value = !dialogVisible.value
  getTableData();

}

//定义方法对象 注意定义的方法 必须在上面已经申明 所以建议objFun申明和 listenClick方法 写在页面最下面
const objFun = {
  'addDictionary': addDictionary
}
// 监听子级表格  传过来的方法
const listenClick = (name: string, val: any) => {
  objFun[name](val)
}

//刷新列表数据
const getTableData = () => {
  dictionaryList(state.param).then(res => {
    if (res.code == 0) {
      state.tableData = res.data
      
    }
  })
}

watch(
  () => props.configType,
  () => {
    state.param.configType = props.configType;
    state.param.keyword = ''
    //初始化数据
    state.search.resets = !state.search.resets
    getTableData()
  },
  { immediate: true }
)

</script>

<style scoped lang='scss'>
.box {
  display: flex;
  flex-direction: column;
}

.table-container {
  margin-top: 10px;
}
</style>